<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/three.js"></script>
</head>
<body>
<script>
    var   sceneWidth=window.innerWidth,
        sceneHeight=window.innerHeight;
    var camera,scene,renderer,cube;
    init();
    animate();
    function init(){
        camera=new THREE.PerspectiveCamera(75,sceneWidth/sceneHeight,1,10000);

        scene=new THREE.Scene();


        renderer=new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight)
        document.body.appendChild(renderer.domElement);
        //创建矩形
        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;
    }

    function animate(){
        requestAnimationFrame(animate);
        cube.rotation.x+=0.01;
        cube.rotation.y+=0.01;
        renderer.render(scene,camera);
    }

</script>
</body>
</html>